<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="../day01/1-jquery.js"></script>
	<script>
		$(function(){
			$('button:first').click(function(){
				// 1.隐藏div 
				// $('div').hide();
				// $('div').show();
				// 切换显示与隐藏
				// $('div').toggle();
				// 2.隐藏div fadeOut淡出
				// $('div').fadeOut(3000);
				// // fadeIn淡入
				// $('div').fadeIn(3000);
				// 切换淡入淡出
				// $('div').fadeToggle();
				// 3.滑出和滑入
				// $('div').slideUp();
				// $('div').slideDown();
				$('div').slideToggle();
			})
		})
	</script>
	<style>
		div{
			width: 100px;
			height: 100px;
			background-color: pink;
			margin-top: 10px;
		}
	</style>
</head>
<body>
	<button>切换</button>
	<div></div>
	<div></div>
</body>
</html>